<!--  -->
<template>
  <div class="box">
    <div class="info">
      <div>{{ moveX }}</div>
      <div class="">{{ moveY }}</div>
      <div>{{ scalc }}</div>
      <!-- <div>{{ windowX }}</div>
      <div>{{ windowY }}</div> -->
    </div>
    <canvas
      @mouseup="mouseup"
      @mousedown="mousedown"
      @mousemove="mousemove"
      ref="canvasCtx"
      class="canvas-ctx"
    ></canvas>
    <div
      :style="[{ top: item.top, left: item.left }]"
      class="child marker"
      :data-id="item.id"
      :data-x="item.x"
      :data-y="item.y"
      v-for="(item, index) in markerMapList"
      :key="index"
    ></div>
  </div>
  <div @click="scalcChange(0.1)">+</div>
  <div @click="scalcChange(-0.1)">-</div>
</template>

<script setup>
import { onMounted } from "vue";
import * as Three from "three";
import * as shapefile from "shapefile";
import path from "path";
// import shpfile from "/gis_osm_roads_free_1.shp";
import lineList from "./test.js";
import useUtils from "@/utils";
const { $common, $router, $store, $global } = useUtils();

onMounted(() => {
  console.log(shapefile);
  shapefile
    .read("/data/gis_osm_roads_free_1.shp", "/data/gis_osm_roads_free_1.dbf")
    .then((res) => {
      features = res.features;
      console.log(features);
      features1 = features.filter((item) => {
        return item.properties.fclass == "motorway";
      });
      features2 = features.filter((item) => {
        return item.properties.fclass == "motorway_link";
      });
      initMap();
    });
});

let canvasCtx = $ref(null);
let ctx = $ref(null);
let windowX = $ref(0);
let windowY = $ref(0);
let features = $ref([]);
let features1 = $ref([]);
let features2 = $ref([]);
function initMap() {
  canvasCtx.width = canvasCtx.clientWidth;
  canvasCtx.height = canvasCtx.clientHeight;
  ctx = canvasCtx.getContext("2d");
  ctx.translate(canvasCtx.clientWidth / 2, canvasCtx.clientHeight / 2);
  draw();

  window.addEventListener("wheel", (data) => {
    let num = 0.5;
    if (data.deltaY > 0) {
      num = -num;
    } else {
      num = num;
    }

    if (data.target.className.includes("marker")) {
      let markerX = data.target.dataset.x;
      let markerY = data.target.dataset.y;
      moveX = moveX + markerX * scalc - markerX * (scalc + num);
      moveY = moveY + markerY * scalc - markerY * (scalc + num);
    } else {
      let x = data.offsetX - canvasCtx.clientWidth / 2;
      let y = data.offsetY - canvasCtx.clientHeight / 2;
      moveX = x - ((x - moveX) / scalc) * (scalc + num);
      moveY = y - ((y - moveY) / scalc) * (scalc + num);
    }
    scalc += num;
  });
}

function draw() {
  // ctx.clearRect(
  //   -canvasCtx.clientWidth / 2,
  //   -canvasCtx.clientHeight,
  //   canvasCtx.clientWidth,
  //   -canvasCtx.clientHeight
  // );
  ctx.clearRect(-9999, -9999, 999999, 999999);
  ctx.translate(moveX, moveY);
  ctx.scale(scalc, scalc);
  ctx.beginPath();
  ctx.arc(0, 0, 4, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(0, 100, 4, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(-100, 0, 4, 0, Math.PI * 2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(-100, 100, 4, 0, Math.PI * 2);
  ctx.fill();
  drawMarker();

  drawLine();

  ctx.scale(1 / scalc, 1 / scalc);
  ctx.translate(-moveX, -moveY);
  requestAnimationFrame(draw);
}

let markerList = $ref([
  {
    x: 200,
    y: 100,
    id: 1,
  },
  {
    x: 50,
    y: 0,
    id: 2,
  },
]);
let markerMapList = $ref([]);

function drawMarker() {
  markerMapList = markerList.map((item) => {
    item.top = moveY + item.y * scalc + canvasCtx.clientHeight / 2 + "px";
    item.left = moveX + item.x * scalc + canvasCtx.clientWidth / 2 + "px";
    return item;
  });
}

function drawLine() {
  features1.forEach((item) => {
    if (item.geometry.coordinates) {
      ctx.beginPath();
      ctx.strokeStyle = "red";
      ctx.lineWidth = 2;
      item.geometry.coordinates.forEach((self, current) => {
        if (current == 0) {
          ctx.moveTo(self[0] * 1000, self[1] * 1000);
        } else {
          ctx.lineTo(self[0] * 1000, self[1] * 1000);
        }
      });
      ctx.stroke();
    }
  });
  features2.forEach((item) => {
    if (item.geometry.coordinates) {
      ctx.beginPath();
      ctx.strokeStyle = "blue";
      ctx.lineWidth = 0.2;
      item.geometry.coordinates.forEach((self, current) => {
        if (current == 0) {
          ctx.moveTo(self[0] * 1000, self[1] * 1000);
        } else {
          ctx.lineTo(self[0] * 1000, self[1] * 1000);
        }
      });
      ctx.stroke();
    }
  });
}

let scalc = $ref(1);
function scalcChange(num) {
  scalc += num;
}

let start = $ref({
  orgMoveX: 0,
  orgMoveX: 0,
  data: null,
});
let moveX = $ref(-116000);
let moveY = $ref(-40000);
function mousedown(data) {
  start = {
    data: data,
    orgMoveX: moveX,
    orgMoveY: moveY,
  };
}

let mouserInfo = $ref(null);
function mousemove(data) {
  windowX = data.offsetX - canvasCtx.clientWidth / 2;
  windowY = data.offsetY - canvasCtx.clientHeight / 2;
  if (start.data) {
    moveX = start.orgMoveX + data.offsetX - start.data.offsetX;
    moveY = start.orgMoveY + data.offsetY - start.data.offsetY;
  }
  mouserInfo = data;
}
function mouseup(data) {
  start.data = null;
}
</script>
<style lang="scss" scoped>
.box {
  width: 700px;
  height: 400px;
  margin: 150px auto 0;
  position: relative;
  overflow: hidden;
  .canvas-ctx {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
  .child {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    transform: translate(-50%, -50%);
  }
  .info {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>
